@model int
@{
    Layout = "~/Views/Shared/_Window.cshtml";
}

<div class="portlet light bordered" id="DBDBConnectionEdit">
    <div class="portlet-title">
        <div class="caption">
            <i class="icon-settings font-dark"></i>
            <span class="caption-subject font-dark sbold uppercase">Horizontal Form</span>
        </div>
        <div class="actions">
            <div class="btn-group btn-group-devided" data-toggle="buttons">
            </div>
        </div>
    </div>
    <div class="portlet-body form">
        <form class="form-horizontal" action="/DB/DBConnection/EditForm" method="post" role="form" id="DBDBConnectionEditForm">
            <div class="form-body">
                <div class="row">
                    <div class="col-md-6 " v-for="item in headers" :key="item.SortId" :class="item.EditType">
                        <div class="form-group">
                            <label class="col-md-3 control-label">{{item.ShowName}}</label>
                            <div class="col-md-9" v-if="item.EditType=='hidden'">
                                <input type="hidden" :name="item.PropertyName" class="form-control" v-model="data[item.PropertyName]">
                            </div>
                            <div class="col-md-9" v-if="item.EditType=='text'">
                                <input type="text" :name="item.PropertyName" class="form-control" v-model="data[item.PropertyName]" :placeholder="'请输入'+item.ShowName">
                            </div>
                            <div class="col-md-9" v-if="item.EditType=='select'">
                                <select class="form-control" v-model="data[item.PropertyName]" :name="item.PropertyName">
                                    <option v-for="op in item.Options" :key="op" :value="op.Item1">{{op.Item2}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-3 col-md-9">
                        <button type="submit" class="btn green">提交保存</button>
                        <button class="btn default" data-dismiss="modal" aria-hidden="true">取消</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
       var userVm = new Vue({
           el: '#DBDBConnectionEdit',
           data: {
               headers: [],
               data: {}
           },
           mounted: function () {
               this.initPage();
               this.getShowHeaders();
               this.getData();
           },
           methods: {
               getShowHeaders: function () {
                   var that = this;
                   $.ajax({
                       type: "GET",
                       url: "/DB/DBConnection/GetShowHeaders",
                       data: { IsCheckEdit: true },
                       dataType: "json",
                       success: function (data) {
                           that.headers =  data == null ? [] : data;;
                       }
                   })
               },
               getData: function () {
                   var that = this;
                   $.ajax({
                       type: "GET",
                       url: "/DB/DBConnection/getData/@(Model)",
                       data: {},
                       dataType: "json",
                       success: function (data) {
                           that.data = data == null ? {} : data;
                       }
                   })
               },
               initPage:function(){
                   $("#DBDBConnectionEditForm").validate();
               
                   $("#DBDBConnectionEditForm").ajaxForm({
                       dataType: "json",
                       beforeSubmit: function () {
                           var isSuccess = $("#DBDBConnectionEditForm").validate().form(); // 返回是否验证成功
                           if (isSuccess) {
                               MyScript.blockUI();
                           } else {
                               $.unblockUI();
                               return false;
                           }
                       },
                       success: function (json) {
                           if (json.IsSuccess) {
                               toastr.clear();
                               toastr["success"](json.Message, "系统提示");
                               parent.$.fancybox.close();
                               parent.currentDBDBConnectionIndexVm.getDataRows();
                           } else {
                               toastr["error"](json.Message, "系统提示");
                               $.unblockUI();
                           }
                       },
                       error: function (XmlHttpRequest, textStatus, errorThrown) {
                           alert("提交出错！", "系统提示");
                           $.unblockUI();
                           alert("textStatus:" + textStatus + ",errorThrown:" + errorThrown);
                       }
                   });
               
               }
           }
       })
    </script>
}